<template>
  <div>
    用户搜索<input type="text" v-model="search" />
    <ul>
      <li v-for="item in newPerson" :key="item.id">
        {{ item.name + "-" + item.sex + "-" + item.age }}
      </li>
    </ul>
    <button @click="sortType = 1">升序</button>
    <button @click="sortType = 2">降序</button>
  </div>
</template>

<script>
export default {
  name: "PersonList",
  data() {
    return {
      person: [
        { id: "001", name: "周杰伦", sex: "男", age: 19 },
        { id: "002", name: "邓伦", sex: "男", age: 24 },
        { id: "003", name: "张杰", sex: "男", age: 35 },
        { id: "004", name: "邓紫棋", sex: "女", age: 33 },
        { id: "005", name: "林俊杰", sex: "男", age: 23 },
        { id: "006", name: "周传雄", sex: "男", age: 21 },
        { id: "007", name: "张惠妹", sex: "女", age: 36 },
      ],
      search: "",
      sortType: 0,
    };
  },
  computed: {
    newPerson() {
      const resultPerson = this.person.filter((item) =>
        item.name.includes(this.search)
      );
      return resultPerson.sort((a, b) => {
        switch (this.sortType) {
          case 1:
            return a.age - b.age;
          case 2:
            return b.age - a.age;
        }
      });
    },
  },
};
</script>
<style scoped>
div {
  background-image: linear-gradient(150deg, skyblue, #d1ffd5);
}
</style>